<template>
	<view class="bookCity">
		<view class="container">
			<view class="city-header">
				<view class="txt">
					<text>小説</text>
					<view class="box"></view>
				</view>
				<view class="city-search">
					<u-search placeholder="请输入关键词" @custom="custom" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="city-swiper">
				<view class="u-demo-block">
					<u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular :autoplay="true"
						radius="5" bgColor="#ffe5b4" indicator indicatorMode="dot"></u-swiper>
				</view>
			</view>
			<view class="city-banner">
				<ul>
					<li v-for="(item, index) in bannerList">
						<view class="banner-con">
							<view class="banner-img" @click="addjumpPublish(index)">
								<image :src="item.icon" mode=""></image>
							</view>
							<text>{{item.name}}</text>
						</view>
					</li>
				</ul>
			</view>
			<view class="city-list">
				<view class="list-title">
					<div class="today">
						<image src="/static/分组 1.png" mode=""></image>
						<text>今日必看</text>
					</div>
					<div class="random" @click="addRandom()">
						<image src="../../static/random.png" mode=""></image>
					</div>
				</view>
				<ul>
					<li v-for="(item, index) in columnList" @click="addJumpDetail(item)">
						<view class="list-con">
							<view class="list-img">
								<image :src="item.cover" mode=""></image>
							</view>
							<div class="list-text">
								<div class="list-name">
									<p>{{item.title}}</p>
								</div>
								<div class="list-author">
									<text>{{item.author}}</text>
									<div class="box">{{item.category}}</div>
								</div>
								<div class="list-detail">
									<rich-text :nodes="item.description"></rich-text>
								</div>
							</div>
						</view>
					</li>

				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getColumn
	} from '@/api/index.js';
	export default {
		data() {
			return {
				keyword: '',
				swiperList: [
					'https://img.zcool.cn/community/01df125d380055a8012187f4980c9b.png@1280w_1l_2o_100sh.png',
					'https://img.zcool.cn/community/01e6885d380636a8012187f4b7f151.jpg@1280w_1l_2o_100sh.jpg',
					'https://img.zcool.cn/community/019c8e5d380055a8012187f4d3ad12.jpg@2o.jpg',
					'https://img.zcool.cn/community/01812d5d380055a80120695c28a1d0.png@1280w_1l_2o_100sh.png'
				],
				bannerList: [{
					name: '出版',
					icon: '/static/publish.png'
				}, {
					name: '分类',
					icon: '/static/classify.png'
				}, {
					name: '免费',
					icon: '/static/free.png'
				}, {
					name: '排行',
					icon: '/static/ranking.png'
				}],
				columnList: [],
				book_id: '',
				category: '',
				description: '',
				num: 2001,
				arr: []
			}
		},
		onLoad() {
			uni.showLoading({
				title: '推荐中'
			})
			getColumn(2001).then(content => {
				let {
					code,
					data: {
						books
					}
				} = content;
				this.columnList = books;
				uni.hideLoading()
				console.log(this.columnList);
			}).catch(error => {
				console.log(error);
			})
		},
		methods: {
			custom() {
				if (this.keyword == '') {
					uni.showToast({
						title: '输入框不能为空',
						icon: 'none'
					})
					return
				} else {
					uni.showToast({
						title: this.keyword,
						icon: 'none'
					})
					// let data = uni.getStorageSync('keyword')

					// let arr = JSON.parse(data);


					this.arr.push(this.keyword);
					let newArr = [...new Set(this.arr)]
					console.log(">>", this.arr);
					let data = {
						keyword: this.keyword,
						arr: newArr
					}
					// console.log(`???`,newArr);
					// uni.setStorageSync('keyword',JSON.stringify(newArr))
					uni.navigateTo({
						url: '../search/search?data=' + encodeURIComponent(JSON.stringify((data)))
					})
					this.keyword = ''
				}

				console.log(this.keyword);
			},
			async addRandom() {
				this.num++;
				if (this.num > 2002) {
					this.num = 2001
				}
				uni.showLoading({
					title: '加载中',
					// mask: false
				});
				await getColumn(this.num).then(content => {
					let {
						code,
						data: {
							books
						}
					} = content;
					this.columnList = books;
					uni.hideLoading()
				}).catch(error => {
					console.log(error);
				})
			},
			addjumpPublish(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/publish/publish'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/classify/classify",
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/free/free",
					})
				} else {
					uni.switchTab({
						url: "/pages/list/list",
					})
				}
			},
			addJumpDetail(item) {
				this.book_id = item.sourceUrl.slice(8);
				console.log(this.book_id);
				this.category = item.category;
				this.description = item.description
				let data = {
					'id': this.book_id,
					'category': this.category,
					'description': this.description
				}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bookCity {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;

		.container {
			width: 90%;
			height: 100%;
			margin: 0 auto;
			// background-color: pink;
			overflow: hidden;

			.city-header {
				margin-top: 20rpx;
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				// background-color: skyblue;

				text {
					position: relative;
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(59, 59, 59, 1);
					margin-left: 20rpx;
				}

				.box {
					position: absolute;
					left: 28px;
					top: 30px;
					width: 24px;
					height: 12px;
					opacity: 1;
					border-radius: 6px 0px, 5px, 0px;
					background: linear-gradient(90deg, rgba(255, 60, 0, 1) 0%, rgba(204, 204, 204, 0) 100%);

				}

				.city-search {
					flex: 1;

					.u-search {
						margin-left: 50rpx !important;
					}
				}
			}

			.city-swiper {
				width: 100%;
				margin-top: 30rpx;
			}

			.city-banner {
				width: 100%;
				height: 124rpx;
				background: rgba(252, 236, 204, 1);
				margin-top: 30rpx;
				border-radius: 11px;

				ul {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					list-style: none;
					margin: 0;
					padding: 0;

					li {
						margin-top: 8rpx;
						width: 100rpx;
						height: 100%;

						.banner-con {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							align-items: center;
							width: 100rpx;
							height: 100%;

							.banner-img {
								width: 58rpx;
								height: 58rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							text {
								font-size: 12.5px;
							}
						}
					}
				}
			}

			.city-list {
				width: 100%;
				background: rgba(252, 236, 204, 1);
				margin-top: 20rpx;
				border-radius: 11px;
				overflow: hidden;

				.list-title {
					display: flex;
					align-items: center;
					width: 90%;
					margin: 25rpx auto;
					justify-content: space-between;
					overflow: hidden;

					.today {
						width: 300rpx;
						height: 50rpx;
						display: flex;
						align-items: center;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							font-family: '苹方';
							/** 文本1 */
							font-size: 18.5px;
							// font-weight: 550;
							color: #000;
							text-shadow: 2px 2px 4px #fff;
							margin-left: 16rpx;
						}
					}

					.random {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
						margin-top: 8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				ul {
					width: 90%;
					padding: 0;
					margin: 40rpx auto 0;
					list-style: none;

					li {
						width: 100%;
						height: 230rpx;
						// background-color: pink;
						margin-bottom: 60rpx;
						box-sizing: border-box;

						.list-con {
							display: flex;
							width: 100%;
							height: 100%;

							.list-img {
								width: 480rpx;
								height: 100%;

								image {
									width: 180rpx;
									height: 100%;
									border-radius: 20rpx;
									border: 1px solid #fd6143;

								}
							}

							.list-text {
								margin: 0 20rpx 0 40rpx;
								width: 1000rpx;

								.list-name {
									margin: 5rpx 0 20rpx 0;

									p {
										font-family: '苹方';
										font-size: 18px;
										font-weight: 600;
										color: rgba(59, 59, 59, 1);
									}
								}
							}

							.list-author {
								display: flex;
								align-items: center;

								text {
									font-size: 14px;
									color: rgba(168, 168, 168, 1);
								}

								.box {
									padding: 2rpx 10rpx;

									background-color: #fce2b2;
									font-size: 10px;
									// font-weight: 600;
									border-radius: 10rpx;
									color: rgba(119, 130, 138, 1);
									text-align: center;
									line-height: 28rpx;
									border: 1px solid #fd6143;
									margin-left: 20rpx;
									margin-top: 5rpx;
								}
							}

							.list-detail {
								margin: 20rpx 0 0;
								font-size: 15px;
								color: rgba(119, 130, 138, 1);

								rich-text {
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}
						}
					}
				}

			}
		}
	}
</style>